import Vue from "vue";
import VueRouter from "vue-router";
// import HomeView from "../views/HomeView.vue";

// Vue的异步组件：使用时再加载，这个技术针对所有组件。路由懒加载针对的是路由组件。
const HomeView = () => import("../views/HomeView.vue");

// import AboutView from "../views/AboutView.vue";
// import Course from "../views/Course.vue";
// import My from "../views/My.vue";

// 组件分为两种：
// 1. 公共组件：将多个页面中的重复模块封装起来，再多个组件中注册子组件，实现元素复用。
// 2. 路由组件：页面级别的组件，一个路由组件代表整个页面，通过路由组件的切换模拟以前的多页面跳转(之前使用a标签跳转x.html页面)

Vue.use(VueRouter);

// routes数组中是用来定义：路由和组件的关系。
const routes = [
  {
    path: "/home", // 路由地址，后期切换path实现页面跳转(组件切换)
    name: "home", // 命名路由
    component: HomeView, // 路由组件，必须匹配一个path路由地址 // 首页是刷新就要加载，因此不需要设置懒加载。
    meta: {
      auth: true,
      routeLevel: 1,
      // a: 1000,
    }, // 路由元信息：可以理解为路由描述信息，让开发者自定义属性。
  },
  {
    path: "/about123",
    name: "about", // 命名路由
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
    meta: {
      auth: false,
      routeLevel: 2,
    },
  },
  {
    path: "/course456",
    // name: "course", // 命名路由
    component: () =>
      import(/* webpackChunkName: "course" */ "../views/Course.vue"),
    meta: {
      auth: true,
      routeLevel: 3,
    },
    children: [
      {
        path: "dcone", // 子路由不加/，如果加/，vue路由默认识别为一级路由。
        name: "dcone",
        component: () =>
          import(/* webpackChunkName: "dcone" */ "../views/DCOne.vue"),
        meta: {
          routeLevel: 3,
        },
      },
      {
        path: "",
        name: "dctwo",
        component: () =>
          import(/* webpackChunkName: "dctwo" */ "../views/DCTwo.vue"),
        meta: {
          routeLevel: 3,
        },
      },
      {
        path: "dcthree",
        name: "dcthree",
        component: () =>
          import(/* webpackChunkName: "dcthree" */ "../views/DCThree.vue"),
        meta: {
          routeLevel: 3,
        },
      },
    ],
  },
  {
    path: "/course/:idss/:name", // 动态路由参数，:是固定的写法，idss可以自定义。
    name: "course1", // 命名路由
    component: () =>
      import(/* webpackChunkName: "course" */ "../views/Course.vue"),
    meta: {
      auth: true,
      routeLevel: 100,
    },
  },
  {
    path: "/my111",
    // name: "my", // 有children子路由的一级路由，去掉name属性，同时router-link改成普通路由写法。
    component: () => import(/* webpackChunkName: "my" */ "../views/My.vue"),
    meta: {
      auth: false,
      routeLevel: 4,
    },
    children: [
      {
        path: "dcone", // 子路由不加/，如果加/，vue路由默认识别为一级路由。
        name: "dcone",
        component: () =>
          import(/* webpackChunkName: "dcone" */ "../views/DCOne.vue"),
        meta: {
          routeLevel: 4,
        },
      },
      {
        path: "",
        name: "dctwo",
        component: () =>
          import(/* webpackChunkName: "dctwo" */ "../views/DCTwo.vue"),
        meta: {
          routeLevel: 4,
        },
      },
      {
        path: "dcthree",
        name: "dcthree",
        component: () =>
          import(/* webpackChunkName: "dcthree" */ "../views/DCThree.vue"),
        meta: {
          routeLevel: 4,
        },
      },
    ],
  },
  {
    path: "/login",
    name: "login",
    component: () =>
      import(/* webpackChunkName: "login" */ "../views/Login.vue"),
    meta: {
      auth: false,
    },
  },
  {
    path: "/",
    // redirect: "/home", // 重定向到 /home 路由
    // redirect: {
    //   name: "home", // 通过命名路由重定向
    // },
    redirect: to => {
      return {
        name: "home",
      };
    },
    meta: {
      routeLevel: 1,
    },
  },
  {
    // 404通常放在路由末尾，上述所有路由都匹配失败，*就会匹配成功。
    path: "*", // *号通配符，匹配任意路由
    component: () =>
      import(/* webpackChunkName: "notfound" */ "../views/NotFoundView.vue"),
  },
  // {
  //   path: "/about",
  //   name: "about",
  //   // route level code-splitting(代码分割)
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ "../views/AboutView.vue")
  // },
];
// 如果不使用懒加载，首次刷新vue会将所有组件全部打包成app.js文件，当项目包体积过大时，页面会处于白屏阶段，体验不好，如何加快首屏渲染速度？
// 路由懒加载：将路由组件进行分割，不再一次性打包到app.js里面，而是用户访问这个路由时，再打包这个组件，渲染页面。首次渲染包的体积就小了，加载速度就快了。

const router = new VueRouter({
  routes,
});

// 全局导航守卫：所有路由都生效。
// router.beforeEach: 所有路由跳转之前，都会经过这个函数，你可以在这个函数内部，判断能否访问这个路由。起到路由拦截的作用。
router.beforeEach((to, from, next) => {
  // console.log("路由导航守卫: ", to.meta.auth);
  if (to.meta.auth) {
    // 需要权限认证：比如登录
    // console.log("需要登录认证");
    const token = localStorage.getItem("token") || undefined;
    if (token) next(); // next() 没有参数表示继续跳转到to路由
    else next(`/login?redirect=${to.path}`); // 此时，next就不能去to这个路由了，而是要到登录路由组件
  } else {
    next(); // next表示执行下一步。
  }
});

export default router;
